<template>
  <div>
    <!-- <a href="/home">Jump Home</a>

    <a href="/about">Jump About</a> -->

    <!-- 
      RouterLink 增加一个 replace 属性的话，则以 replace 模式来跳转
     -->
    <RouterLink to="/home" replace>Jump Home By RouterLink</RouterLink>
    <hr />

    <button @click="jump('/home')">Jump Home</button>
    <br />
    <button @click="jumpTwo('/about')">Jump About</button>

    <br />
    <button @click="fn1">Back</button>
    <button @click="fn2">Forward</button>
    <hr />

    <RouterView />
  </div>
</template>

<script>
export default {
  methods: {
    jump(path) {
      /**
       * push 与 replace 方法，传递的参数与 RouterLink 组件的 to 属性一样，都可以是字符串或对象的写法
       */

      //  1. 字符串写法
      // this.$router.push(path)

      //  2. 对象写法
      this.$router.push({
        path: path,
      })
    },

    jumpTwo(path) {
      this.$router.replace(path)
    },

    fn1() {
      this.$router.back() // 后退
    },

    fn2() {
      this.$router.forward() // 前进
    }
  }
}
</script>
